<template>
  <div class="yy-header-user">
    <div class="avatar-container">
      <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
        <div class="avatar-wrapper">
          <img :src="userStore.avatar" class="user-avatar" />
          <span v-if="!props.showAvatorOnly">
            <span style="margin: 0 5px;"> {{userStore.nickName}}</span>
            <el-icon><caret-bottom /></el-icon>
          </span>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
<!--            <router-link to="/client/profile?redirect=/client/home">-->
<!--              <el-dropdown-item>个人中心</el-dropdown-item>-->
<!--            </router-link>-->
            <el-dropdown-item divided command="logout">
              <span>退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>

import {ElMessageBox} from "element-plus";
import useUserStore from "@/store/modules/user.js";

const userStore = useUserStore()

const props = defineProps({
  showAvatorOnly: {
    type: Boolean,
    required: false
  }
})

function handleCommand(command) {
  switch (command) {
    case "setLayout":
      setLayout();
      break;
    case "logout":
      logout();
      break;
    default:
      break;
  }
}

function logout() {
  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    userStore.logOut().then(() => {
      location.href = '/nurse.html';
    })
  }).catch(() => { });
}
</script>

<style scoped lang="scss">
.yy-header-user {
  height: 100%;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  :deep(.el-dropdown) {
    height: 100%;
  }
  &-dropdown {
    display: inline-flex;
    align-items: center;
  }
  &-name {
    height: 100%;
    display: inline-flex;
    align-items: center;
    padding: 3px 15px;
    & > img {
      width: 24px;
    }
  }
  &-icons {
    font-size: 24px;
    margin-right: 5px;
  }

  .avatar-container {
    margin-right: 15px;
    .avatar-wrapper {
      position: relative;
      display: inline-flex;
      align-items: center;
      font-size: 16px;
      color: #fff;
      .user-avatar {
        cursor: pointer;
        width: 40px;
        height: 40px;
        border-radius: 10px;
      }
      i {
        cursor: pointer;
      }
    }
  }
}
</style>
